<template>
  <div>
<div>姓名{{ Person.name }}</div>
<div>年龄{{ Person.age }}</div>
<div>年龄{{ Person.hobby }}</div>
<button @click="changeName">改变姓名</button>
<br>
<button @click="changeAge">改变年龄</button>
<br>
<button @click="changeHobby">改变爱好</button>
  </div>
</template>
<script lang="ts" setup name="Person">
import { reactive, ref, toRef, toRefs } from 'vue';
let Person=reactive({
  name:"银河",
  age:20,
  hobby:'看短剧'
})
// toRefs一次解析多个，解析为ref形式
let {name,age}=toRefs(Person)
// toRef一次解析一个，解析为ref形式
let hobby=toRef(Person,'hobby')
function changeName(){
 name.value+="~"
}
function changeAge(){
 age.value+=1
}
function changeHobby(){
 hobby.value+="~"
}
</script>
<style>

</style>